<template>
  <div class="story-container">
    <div class="story-content">
      <router-view />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "StoryContainer",
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
@import "../common/style/_var.scss";
.story-container {
  position: fixed;
  left: $nav-width;
  bottom: 0;
  top: $header-height;
  // z-index: 2;
  right: 0;

  // padding: $story-padding;
  overflow-y: scroll;
  overflow-x: auto;
  background-color: #fff;

 
  .story-content {
    position: relative;
    flex: 1;
    padding: 20px 35px;
    .van-doc-content {
      position: relative;
      flex: 1;
      padding: 0 0 75px;

      a {
        margin: 0 1px;
        color: $doc-blue;
        -webkit-font-smoothing: auto;

        &:hover {
          color: darken($doc-blue, 10%);
        }

        &:active {
          color: darken($doc-blue, 20%);
        }
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: $doc-black;
        font-weight: normal;
        line-height: 1.5;

        &[id] {
          cursor: pointer;
        }
      }

      h1 {
        margin: 0 0 30px;
        font-size: 30px;
        cursor: default;
      }

      h2 {
        margin: 45px 0 20px;
        font-size: 25px;
      }

      h3 {
        margin-bottom: 16px;
        font-weight: 600;
        font-size: 18px;
      }

      h4 {
        margin: 24px 0 12px;
        font-weight: 600;
        font-size: 16px;
      }

      h5 {
        margin: 24px 0 12px;
        font-weight: 600;
        font-size: 15px;
      }

      p {
        color: $doc-text-color;
        font-size: 15px;
        line-height: 26px;
      }

      table {
        width: 100%;
        margin-top: 12px;
        color: $doc-text-color;
        font-size: 14px;
        line-height: 1.5;
        border-collapse: collapse;

        th {
          padding: 8px 10px;
          font-weight: 600;
          text-align: left;

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            padding-right: 0;
          }
        }

        td {
          padding: 8px;
          border-top: 1px solid $doc-code-background-color;

          &:first-child {
            padding-left: 0;

            // version tag
            code {
              margin: 0;
              padding: 2px 6px;
              color: $doc-blue;
              font-weight: 600;
              font-size: 11px;
              background-color: fade($doc-blue, 10%);
              border-radius: 20px;
            }
          }

          &:last-child {
            padding-right: 0;
          }
        }

        em {
          color: $doc-green;
          font-size: 14px;
          font-family: $doc-code-font-family;
          font-style: normal;
          -webkit-font-smoothing: auto;
        }
      }

      ul li,
      ol li {
        position: relative;
        margin: 5px 0 5px 10px;
        padding-left: 15px;
        color: $doc-text-color;
        font-size: 15px;
        line-height: 26px;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          width: 6px;
          height: 6px;
          margin-top: 10px;
          border: 1px solid $doc-dark-grey;
          border-radius: 50%;
          content: "";
        }
      }

      hr {
        margin: 30px 0;
        border: 0 none;
        border-top: 1px solid #eee;
      }

      p > code,
      li > code,
      table code {
        display: inline;
        margin: 0 2px;
        padding: 2px 5px;
        font-size: 14px;
        font-family: inherit;
        word-break: keep-all;
        background-color: $doc-background-color;
        border-radius: 4px;
        -webkit-font-smoothing: antialiased;
      }

      p > code {
        font-size: 14px;
      }

      section {
        padding: 24px;
        overflow: hidden;
      }

      blockquote {
        margin: 16px 0 0;
        padding: 16px;
        background-color: #ecf9ff;
        border-radius: $doc-border-radius;
      }

      img {
        width: 100%;
        margin: 16px 0;
        border-radius: $doc-border-radius;
      }

      &--changelog,
      &--changelog-v3 {
        strong {
          display: block;
          margin: 24px 0 12px;
          font-weight: 600;
          font-size: 15px;
        }

        h3 {
          + p code {
            margin: 0;
          }

          a {
            color: inherit;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>
